<template>
  <section class="app-inner">
    <el-card class="header-card cardBox">
      <el-form ref="editFormRef" labelWidth="150px" size="small" class="formDiv">
        <el-form-item label="设备名称：" prop="eqptName">
          {{ alarmData.eqptName }}
        </el-form-item>
        <el-form-item label="设备位置：" prop="eqptAddress">
          {{ alarmData.eqptAddress }}
        </el-form-item>
        <el-form-item label="告警内容：" prop="alarmContent">
          {{ alarmData.alarmContent }}
        </el-form-item>
        <el-form-item label="告警等级：" prop="alarmLevel">
          {{
            alarmData.alarmLevel === '1'
              ? '低级'
              : alarmData.alarmLevel === '2'
              ? '中级'
              : alarmData.alarmLevel === '3'
              ? '高级'
              : ''
          }}
        </el-form-item>
        <el-form-item label="告警时间：" prop="alarmDate">
          {{ moment(alarmData.alarmDate).format('YYYY-MM-DD HH:mm:ss') }}
        </el-form-item>
        <el-form-item label="状态：" prop="alarmOff">
          {{ alarmData.alarmOff === 0 ? '未解除告警' : alarmData.alarmOff === 1 ? '已解除告警' : '' }}
        </el-form-item>
        <el-form-item label="转为工单：" prop="orderNo">
          <span v-if="alarmData.orderNo">是</span>
          <span v-else
            >否 | <el-button type="text" size="small" @click="changeToGD(alarmData.dataId)">转为工单</el-button></span
          >
        </el-form-item>
        <div v-if="alarmData.orderNo">
          <el-form-item label="工单编号：" prop="orderNo">
            {{ alarmData.orderNo }}
          </el-form-item>
          <!-- （100：未派单 200:：处理中 300：已完成） -->
          <el-form-item label="当前状态：" prop="status">
            {{ getStatus(alarmData.status) }}
          </el-form-item>
          <el-form-item label="接单人员：" prop="handlerName">
            {{ alarmData.handlerName }}
          </el-form-item>
          <el-form-item label="异常描述：" prop="description">
            {{ alarmData.description }}
          </el-form-item>
          <el-form-item label="处理反馈：" prop="feedback">
            {{ alarmData.feedback }}
          </el-form-item>
          <el-form-item label="问题定位：" prop="reason">
            {{ alarmData.reason }}
          </el-form-item>
          <el-form-item label="处理照片：" prop="dealImgUrl">
            <div class="block">
              <div v-for="(item, index) in alarmData.dealImgUrl" :key="index">
                <el-image
                  v-if="item"
                  style="width: 120px; height: 120px;marginRight: 20px;"
                  :src="item"
                  :preview-src-list="[item]"
                ></el-image>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="工单进程：" prop="workOrderProcessings">
            <el-steps
              direction="vertical"
              :active="alarmData.status === 100 ? 0 : alarmData.status === 200 ? 1 : alarmData.status === 300 ? 3 : 0"
              :class="alarmData.workOrderProcessings ? 'finshSteps' : ''"
              finish-status="success"
            >
              <!-- v-for="(item,index) in workOrderProcessings" v-bind:key="index" -->
              <!-- <el-step title="待处理" description="2020-01-01"></el-step>
              <el-step title="进行中" description=""></el-step>
              <el-step title="已完成" description="" ></el-step> -->
              <!-- <div v-for="(item,index) in alarmData.workOrderProcessings" v-bind:key="index"> -->
              <el-step
                :title="getStatus(item.status)"
                :description="item.time"
                v-for="(item, index) in alarmData.workOrderProcessings"
                v-bind:key="index"
              ></el-step>
              <!-- <i class="step01" slot="icon"></i>
              <i class="step02" slot="icon"></i>
              <i class="step03" slot="icon"></i> -->
            </el-steps>
            <!-- <el-steps direction="vertical" class="centerSteps">
              <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
              <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
            </el-steps>
            <el-steps direction="vertical" class="unfinshSteps">
              <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
            </el-steps> -->
          </el-form-item>
          <el-form-item label="完成时间：" prop="finishTime">
            <div v-if="alarmData.status === 300">
              {{
                getFinshTime(alarmData.workOrderProcessings)
                  ? moment(getFinshTime(alarmData.workOrderProcessings)).format('YYYY-MM-DD HH:mm:ss')
                  : ''
              }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </section>
</template>

<script>
import { getDetailByDataId, createWorkOrder } from './js/alarm'
import moment from 'moment'
export default {
  name: 'AlarmDetail',
  data () {
    return {
      alarmData: {
        id: 1111
      }
    }
  },
  mounted: function () {
    var id = this.$route.query.id
    this.getDetail(id)
  },

  methods: {
    moment,
    async getDetail (id) {
      this.alarmData = await getDetailByDataId(id)
      this.alarmData.dealImgUrl = this.alarmData.dealImgUrl ? this.alarmData.dealImgUrl.split(';') : []
      console.log(this.alarmData, 9090)
    },
    changeToGD (dataId) {
      this.$confirm('是否确认转为工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.getWorkOrder(dataId)
        })
        .catch(() => {
          this.$message.warning('已取消')
        })
    },
    async getWorkOrder (dataId) {
      let params = {
        dataId: dataId
      }
      const { code, msg } = await createWorkOrder(params)
      if (code === 0) {
        this.getDetail(dataId)
      } else {
        this.$message.warning(msg)
      }
    },
    getStatus (status) {
      // （100：未派单 200:：处理中 300：已完成）
      if (status === 100) return '未派单'
      else if (status === 200) return '处理中'
      else if (status === 300) return '已完成'
      else return ''
    },
    getFinshTime (workOrderProcessings) {
      var time = ''
      workOrderProcessings.forEach(item => {
        if (item.status === 300) {
          time = item.time
        }
      })
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.cardBox {
  display: flex;
  justify-content: center;
}
.formDiv {
  max-width: 800px;
}
.finshSteps {
  height: 240px;
}
.finshStep {
  // height: 80px;
}
.centerSteps {
  height: 160px;
}
.unfinshSteps {
  height: 80px;
}
.step01,
.step02,
.step03 {
  width: 35px;
  height: 25px;
  background-size: 100% 100%;
}
.step01 {
  background-image: url('~@/assets/images/propertyFirst.png');
}
.step02 {
  background-image: url('~@/assets/images/propertySecond.png');
}
.step03 {
  background-image: url('~@/assets/images/propertyThird.png');
}
/deep/ {
  .el-form-item__content {
    font-size: 18px !important;
  }
  .el-form-item__label {
    font-size: 18px !important;
  }
  .el-button--text {
    font-size: 18px !important;
  }
  // .el-steps{
  //   height: 200px;
  // }
  .el-step__icon.is-text {
    // border: none;
  }
  .el-step__icon {
    top: -7px;
  }
  // .el-step__title.is-finish {
  //   color: #13ce66;
  // }
  // .el-step__description.is-finish{
  //   color: #13ce66;
  // }
  // .el-step__head.is-finish{
  //   border-color: #13ce66;
  //   color: #13ce66;
  // }
}
.block {
  display: flex;
  justify-content: flex-start;
}
</style>
